<template>
  <div id="map1" class="map-main">
    <div id="map"></div>

    <div id="controls">
      <h2>Leaflet GeoTIFF (plotty example)</h2>

      <form>
        <p>
          <label
            >displayMin:
            <input type="number" id="displayMin" value="0" />
          </label>
          <label
            >displayMax:
            <input type="number" id="displayMax" value="10" />
          </label>
        </p>
        <p>
          <label
            >clampMin:
            <input type="checkbox" id="clampLow" />
          </label>
          <label
            >clampMax:
            <input type="checkbox" id="clampHigh" />
          </label>
        </p>
        <p>
          <label>
            colorScale:
            <select id="colorScale">
              <option>viridis</option>
              <option>inferno</option>
              <option>turbo</option>
              <option>rainbow</option>
              <option>jet</option>
              <option>hsv</option>
              <option>hot</option>
              <option>cool</option>
              <option>spring</option>
              <option>summer</option>
              <option>winter</option>
              <option>autumn</option>
              <option>bone</option>
              <option>copper</option>
              <option>greys</option>
              <option>yignbu</option>
              <option>greens</option>
              <option>yiorrd</option>
              <option>bluered</option>
              <option>rdbu</option>
              <option>picnic</option>
              <option>portland</option>
              <option>blackbody</option>
              <option>earth</option>
              <option>electric</option>
              <option>magma</option>
              <option>plasma</option>
            </select>
          </label>
        </p>
        <p>
          <button id="getBounds">Zoom to bounds</button>
          <button id="getColorbarOptions">Log getColorbarOptions</button>
        </p>
      </form>
    </div>
  </div>
</template>

<script>
// import "leaflet-geotiff/leaflet-geotiff.js";
// import "leaflet-geotiff/leaflet.js";
// // import "geotiff";
// import "https://unpkg.com/leaflet@1.5.1/dist/leaflet.js";
// import "https://unpkg.com/geotiff@1.0.0-beta.7/dist/geotiff.bundle.js";
// import "https://unpkg.com/plotty@0.4.4/dist/plotty.min.js";
import "leaflet-geotiff/leaflet-geotiff-plotty.js";
import "leaflet-geotiff/leaflet-geotiff-vector-arrows.js";

// // optional renderers
// import "leaflet-geotiff-2";
// import "leaflet-geotiff-2/dist/leaflet-geotiff-rgb";
// import "leaflet-geotiff-2/dist/leaflet-geotiff-vector-arrows";
// import "leaflet-geotiff-2/dist/leaflet-geotiff-plotty"; // requires plotty
// import * as L from "leaflet";
export default {
  data() {
    return {
      // 地图容器
      map: null,
    };
  },
  methods: {},
  mounted() {
    //初始化地图容器
    // this.map = L.map("map", {
    //   //参考坐标系
    //   crs: L.CRS.EPSG4326,
    //   //不添加属性说明控件
    //   attributionControl: false,
    //   //限制显示地理范围
    //   maxBounds: L.latLngBounds(L.latLng(-180, -180), L.latLng(180, 180)),
    // });

    // // 设置范围(这里是武汉)
    // this.map.setView([30.59, 114.32], 10);
    // // 矢量图+注记
    // let mapTypes = ["vec_c", "cva_c"];
    // // 影像图+注记
    // // let types = ['img_c', 'cia_c'];
    // // 天地图 token
    // let tdtToken = "93724b915d1898d946ca7dc7b765dda5";
    // let layers = [];
    // for (let i = 0, len = mapTypes.length; i < len; i++) {
    //   let tdtUrl = `http://t0.tianditu.gov.cn/DataServer?T=${mapTypes[i]}&x={x}&y={y}&l={z}&tk=${tdtToken}`;
    //   let layer = L.tileLayer(tdtUrl, {
    //     zoomOffset: 1,
    //     noWrap: true,
    //     bounds: [
    //       [-90, -180],
    //       [90, 180],
    //     ],
    //   });
    //   layers.push(layer);
    // }
    // L.layerGroup(layers).addTo(this.map);

    // var url = "../assets/image/response.tif";
    // var options = { bounds: [32.365556, 119.374167] };
    // // var BaseOsm = L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
    // //   attribution:
    // //     '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
    // // }).addTo(map);

    // var layer = geotiff.leafletGeotiff(url, options).addTo(map);

    //const map = L.map("map").setView([-37, 150], 5);
    const map = L.map("map").setView([45, 120], 5);
    L.tileLayer(
      "https://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=9a516b0f2a8179bb68f73172cff4bd22"
      //"http://{s}.sm.mapstack.stamen.com/(toner-lite,$fff[difference],$fff[@23],$fff[hsl-saturation@20])/{z}/{x}/{y}.png"
    ).addTo(map);

    //const windSpeedUrl = "http://172.21.144.1:8080/demo/wind_speed.tif";
    const windSpeedUrl = "http://172.21.144.1:8080/demo/response.tif";
    // if (
    //   typeof module !== "undefined" &&
    //   typeof module.exports !== "undefined"
    // ) {
    //   var L = require("leaflet-geotiff/leaflet-geotiff-plotty");
    //   var plotty = require("plotty");
    // }
    const plottyRenderer = L.LeafletGeotiff.plotty({
      displayMin: 0,
      displayMax: 10,
      clampLow: false,
      clampHigh: false,
    });
    const windSpeedLayer = L.leafletGeotiff(windSpeedUrl, {
      renderer: plottyRenderer,
    }).addTo(map);

    // VECTOR ARROW EG
    //const windDirUrl = "http://172.21.144.1:8080/demo/wind_direction.tif";
    //const windDirUrl = "http://172.21.144.1:8080/demo/response.tif";
    // const windDirUrl =
    //   "https://danwild.github.io/leaflet-geotiff-2/wind_direction.tif";
    // const arrowRenderer = L.LeafletGeotiff.vectorArrows({
    //   arrowSize: 20,
    // });
    // const windDirLayer = L.leafletGeotiff(windDirUrl, {
    //   renderer: arrowRenderer,
    // }).addTo(map);

    // $(document).ready(function () {
    //   // MAP
    //   const map = L.map("map").setView([-37, 150], 5);
    //   L.tileLayer(
    //     "http://{s}.sm.mapstack.stamen.com/(toner-lite,$fff[difference],$fff[@23],$fff[hsl-saturation@20])/{z}/{x}/{y}.png"
    //   ).addTo(map);

    //   const windSpeedUrl = "http://172.23.224.1:8080/demo/wind_speed.tif";
    //   //const windSpeedUrl = "wind_speed.tif";
    //   // const windSpeedUrl =
    //   //   "https://danwild.github.io/leaflet-geotiff-2/wind_speed.tif";

    //   const plottyRenderer = L.LeafletGeotiff.plotty({
    //     displayMin: 0,
    //     displayMax: 10,
    //     clampLow: false,
    //     clampHigh: false,
    //   });
    //   const windSpeedLayer = L.leafletGeotiff(windSpeedUrl, {
    //     renderer: plottyRenderer,
    //   }).addTo(map);

    //   // VECTOR ARROW EG
    //   const windDirUrl = "http://172.23.224.1:8080/demo/wind_direction.tif";
    //   // const windDirUrl =
    //   //   "https://danwild.github.io/leaflet-geotiff-2/wind_direction.tif";
    //   const arrowRenderer = L.LeafletGeotiff.vectorArrows({
    //     arrowSize: 20,
    //   });
    //   const windDirLayer = L.leafletGeotiff(windDirUrl, {
    //     renderer: arrowRenderer,
    //   }).addTo(map);

    //   $("#displayMin").on("change", (event) => {
    //     windSpeedLayer.options.renderer.setDisplayRange(
    //       +event.currentTarget.value,
    //       windSpeedLayer.options.renderer.options.displayMax
    //     );
    //   });
    //   $("#displayMax").on("change", (event) => {
    //     windSpeedLayer.options.renderer.setDisplayRange(
    //       windSpeedLayer.options.renderer.options.displayMin,
    //       +event.currentTarget.value
    //     );
    //   });

    //   $("#clampLow").on("change", (event) => {
    //     windSpeedLayer.options.renderer.setClamps(
    //       event.currentTarget.checked,
    //       windSpeedLayer.options.renderer.options.clampHigh
    //     );
    //   });

    //   $("#clampHigh").on("change", (event) => {
    //     windSpeedLayer.options.renderer.setClamps(
    //       windSpeedLayer.options.renderer.options.clampLow,
    //       event.currentTarget.checked
    //     );
    //   });

    //   $("#colorScale").on("change", (event) => {
    //     const colorScale = $("#colorScale option:selected").val();
    //     windSpeedLayer.options.renderer.setColorScale(colorScale);
    //   });

    //   $("#getBounds").on("click", (event) => {
    //     event.preventDefault();
    //     const bounds = windSpeedLayer.getBounds();
    //     map.fitBounds(bounds, { maxZoom: 15 });
    //   });

    //   $("#getColorbarOptions").on("click", (event) => {
    //     event.preventDefault();
    //     const options = windSpeedLayer.options.renderer.getColorbarOptions();
    //     console.log("getColorbarOptions", options);
    //   });

    //   let popup;
    //   map.on("click", function (e) {
    //     if (!popup) {
    //       popup = L.popup().setLatLng([e.latlng.lat, e.latlng.lng]).openOn(map);
    //     } else {
    //       popup.setLatLng([e.latlng.lat, e.latlng.lng]);
    //     }
    //     const value = windSpeedLayer.getValueAtLatLng(
    //       +e.latlng.lat,
    //       +e.latlng.lng
    //     );
    //     popup
    //       .setContent(`Possible value at point (experimental/buggy): ${value}`)
    //       .openOn(map);
    //   });
    // });
  },
};
</script>

 
<style scoped>
.map-main {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ccc;
}
#map {
  z-index: 0;
  float: left;
  height: 100%;
  width: 70%;
  background-color: #333;
}

#controls {
  text-align: center;
  float: left;
  bottom: 0px;
  height: 100%;
  width: 30%;
  background: #ccc;
}
</style>